<template>
	<div class="table-content-wrapper">
		<el-table :data="tableData" class="table-content" header-row-class-name="table-header-wrapper" :show-header="showheader">
			<template v-for="item in columns" :key="item.prop">
				<el-table-column
					v-if="item.type === 'index'"
					:index="indexMethod"
					type="index"
					:key="item.prop"
					:prop="item.prop ? item.prop : null"
					:label="item.label ? item.label : null"
					:width="item.width ? item.width : null"
					:sortable="item.sortable ? item.sortable : false"
					:align="item.align ? item.align : 'left'"
					:fixed="item.fixed ? item.fixed : null"
					:class-name="item.className"
					min-width="50"
				>
				</el-table-column>
				<el-table-column
					v-else
					:prop="item.prop ? item.prop : null"
					:label="item.label ? item.label : null"
					:width="item.width ? item.width : null"
					:sortable="item.sortable ? item.sortable : false"
					:align="item.align ? item.align : 'left'"
					:fixed="item.fixed ? item.fixed : null"
					:class-name="item.className"
					min-width="50"
				>
					<template #default="scope">
						<slot :name="item.prop" v-bind="scope">
							{{ scope.row[item.prop] }}
						</slot>
					</template>
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>
<script setup>
import { defineProps } from "vue"

const props = defineProps({
	columns: {
		type: Array,
		default: () => []
	},
	tableData: {
		type: Array,
		default: () => []
	},
	showheader: {
		type: Boolean,
		default: () => true
	}
})

const indexMethod = (index) => {
	return `NO.${index + 1}`
}
</script>
<style lang="scss">
.table-content-wrapper {
	.el-table--default .el-table__cell {
		padding: 13px 0px;
	}
	.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border-bottom: transparent;
	}
}
</style>
